<template>
  <el-card shadow="never" class="container">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane :label="`已领薪（${totalPaid}）`" name="paid">
        <salaryListPaid :card-id="cardId" :query-month="queryMonth" @total="handleTotal($event, 'Paid')" @selections="getSelections"/>
      </el-tab-pane>
      <el-tab-pane :label="`待领薪（${totalWill}）`" name="will">
        <salaryListWillPay :card-id="cardId" :query-month="queryMonth" @total="handleTotal($event, 'Will')" @selections="getSelections"/>
      </el-tab-pane>
      <el-tab-pane :label="`停止发薪（${totalStop}）`" name="stop" >
        <salaryListStop :card-id="cardId" :query-month="queryMonth" @total="handleTotal($event, 'Stop')" @selections="getSelections"/>
      </el-tab-pane>
    </el-tabs>
    <export-button class="export" size="small" @export="handleExport">导出明细</export-button>
  </el-card>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

import salaryListPaid from './salary-list-paid.vue'
import salaryListWillPay from './salary-list-will-pay.vue'
import salaryListStop from './salary-list-stop.vue'

import { exportEmployeeSalaryRecord } from '@/api/salary'
export default defineComponent({
  components: {
    salaryListPaid,
    salaryListWillPay,
    salaryListStop
  },
  props: {
    id: {
      type: [String, Number],
      default: ''
    },
    cardId: {
      type: [String, Number],
      default: ''
    },
    queryMonth: {
      type: String,
      default: ''
    },
    basicInfo: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      activeName: 'paid',
      totalPaid: 0,
      totalWill: 0,
      totalStop: 0,
      selects: [],
      statusMap: {
        paid: 1,
        will: 0,
        stop: 2
      }
    }
  },
  methods: {
    handleClick(ev: Event) {
      console.log(ev)
    },
    handleTotal(total: number, type: string) {
      (this as any)[`total${type}`] = total
    },
    getSelections(selection: any) {
      this.selects = selection
    },
    handleExport() {
      console.log(44444, this.selects)
      if (!this.selects?.length) {
        this.$message.warning('请至少选择一条数据')
        return
      }
      const query = {
        queryMonth: (this as any).queryMonth,
        idCardNos: (this as any).selects.join(','),
        status: (this as any).statusMap[this.activeName]
      }
      exportEmployeeSalaryRecord(query).then((res: any) => {
        window.location.href =
          process.env.VUE_APP_BASE_URL +
          '/common/download?delete=true&fileName=' +
          res
        this.$message.success('导出成功！')
      })
    }
  }
})
</script>

<style scoped lang="stylus">
.container
  position relative
.export
  position absolute
  right 20px
  top 15px
</style>
